<section class="header clearfix">
  <div class="right-buttons">
    <button class="btn btn-sm bg-primary" type="button" {{action "newApikey" "account"}}>{{t 'apiPage.actionButton'}}</button>
  </div>

  <h1>{{t 'apiPage.header'}}</h1>
</section>

<section>
  <p class="help-text">
    {{t 'apiPage.detail' name=access.principal.displayName}}
  </p>

  <p>
    <b>{{t 'apiPage.currentEndpoint'}}</b>
    <code class="p-10 ml-10 mr-10">
      <a href="{{endpointService.api.auth.current}}" target="_blank" rel="nofollow noreferrer">{{endpointService.api.display.current}}</a>
    </code>
    {{copy-to-clipboard clipboardText=endpointService.api.auth.current size="sm"}}
  </p>
</section>

<section>
  {{#sortable-table
      tableClassNames="bordered mt-30"
      bulkActions=true
      descending=descending
      paging=false
      search=false
      sortBy=sortBy
      headers=headers
      body=rows
      as |sortable kind key dt|
  }}
    {{#if (eq kind "row")}}
      {{apikey-row model=key dt=dt}}
    {{else if (eq kind "norows")}}
      <tr>
        <td colspan="{{sortable.fullColspan}}" class="text-center text-muted pt-20 pb-20">{{t 'apiPage.table.noData'}}</td>
      </tr>
    {{/if}}
  {{/sortable-table}}
</section>
